<template>
  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="48" height="48" rx="24" fill="currentColor" />
    <path
      d="M16 28L24 20L32 28"
      stroke="#222222"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#E1E2E3',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #cbcbcb;
    }
  }
</style>
